<template>
  <div class="tool-coding-url">
    <div>
      <el-button
        size="mini"
        type="primary"
        @click="btnClick(true)">编 码</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="btnClick(false)">解 码</el-button>
    </div>

    <!--提示框-->
    <el-dialog
      :title="'URL' + (coding ? '编码(encode)' : '解码(decode)')"
      :visible.sync="isShow"
      width="800px">

      <el-form
        ref="form"
        :model="form"
        label-width="80px">
        <el-form-item label="URL">
          <el-input
            v-model="form.inputValue"
            type="textarea"/>
        </el-form-item>
        <el-form-item
          v-if="form.data"
          label="Data" >
          <el-card
            :body-style="{ padding: '0px 15px' }"
            class="box-card">
            <span
              class="w-text-warp pop-show-data">{{ form.data }}</span>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click="isShow = false">取 消</el-button>
          <el-button
            :disabled="!form.inputValue"
            size="mini"
            type="primary"
            @click="okBtnClick">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'WebToolUrl',
  data() {
    return {
      isShow: false,
      // 编码还是解码
      coding: true,
      form: {
        inputValue: '',
        data: ''
      }
    }
  },
  methods: {
    btnClick(coding) {
      this.form = {
        inputValue: '',
        data: ''
      }
      this.coding = coding
      this.isShow = true
    },
    okBtnClick() {
      const func = this.coding ? encodeURIComponent : decodeURIComponent
      this.form.data = func(this.form.inputValue)
    }
  }
}
</script>

<style scoped>

</style>

<style lang="scss">

  .tool-coding-url {
    .el-form-item__content {
      line-height: 24px;
    }
  }

</style>
